<template>
  <el-dialog
    :model-value="showTemplateDialogVisible"
    width="960"
    @close="closeDialog"
    :close-on-click-modal="false"
  >
    <template #header>
      <div style="font-weight: bold">选择模板</div>
    </template>
    <div class="template-list" v-loading="templateLoading">
      <div class="empty-template" @click="handleUse({ id: -1 })">
        <div></div>
        <div style="text-align: center">
          <el-icon :size="30" color="#60c041">
            <Plus />
          </el-icon>
          <div>空白模板</div>
        </div>
        <el-button type="primary">立即应用</el-button>
      </div>
      <div
        class="template-item"
        v-for="(item, index) in templateList"
        :key="index"
        @click="handleUse(item)"
      >
        <el-image
          :src="item.previewPicUrls"
          style="width: 100%; height: 100%"
          fit="contain"
        ></el-image>
        <div class="mask">
          <el-button type="primary">立即应用</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
  import { Plus } from '@element-plus/icons-vue'
  import { getTemplateList } from '@/api/materialManagement'

  const props = defineProps({
    showTemplateDialogVisible: {
      type: Boolean,
      default: false
    },
    pageValue: {
      type: Number
    }
  })
  const emit = defineEmits(['close'])

  const templateList = ref<any[]>([])
  const templateLoading = ref(false)

  function closeDialog() {
    emit('close')
  }

  function handleUse(item: any) {
    if (props.pageValue === 2) {
      if (item.id !== -1) {
        const url = `${window.location.origin}/admin/#/examPageDiy/examDesign?type=add&templateId=${item.templateId}&pageValue=2`
        window.open(url, '_blank')
      } else {
        const url = `${window.location.origin}/admin/#/examPageDiy/examDesign?type=add&pageValue=2`
        window.open(url, '_blank')
      }
    } else if (props.pageValue === 5) {
      if (item.id !== -1) {
        const url = `${window.location.origin}/admin/#/pcPageDiy/pcDesign?type=add&templateId=${item.templateId}&pageValue=5`
        window.open(url, '_blank')
      } else {
        const url = `${window.location.origin}/admin/#/pcPageDiy/pcDesign?type=add&pageValue=5`
        window.open(url, '_blank')
      }
    } else if (props.pageValue === 3) {
      if (item.id !== -1) {
        const url = `${window.location.origin}/admin/#/userCenterPageDiy/userCenterDesign?type=add&templateId=${item.templateId}&pageValue=3`
        window.open(url, '_blank')
      } else {
        const url = `${window.location.origin}/admin/#/userCenterPageDiy/userCenterDesign?type=add&pageValue=3`
        window.open(url, '_blank')
      }
    } else if (props.pageValue === 1) {
      if (item.id !== -1) {
        const url = `${window.location.origin}/admin/#/pageDiy/design?type=add&templateId=${item.templateId}&pageValue=1`
        window.open(url, '_blank')
      } else {
        const url = `${window.location.origin}/admin/#/pageDiy/design?type=add&pageValue=1`
        window.open(url, '_blank')
      }
    }
    closeDialog()
  }

  async function getData() {
    try {
      templateLoading.value = true
      const res = await getTemplateList({
        pageNum: 1,
        pageSize: 100,
        pageType: props.pageValue
      })
      if (res.code === '00000') {
        templateList.value = res.data.list
      }
    } catch (e) {
    } finally {
      templateLoading.value = false
    }
  }

  onMounted(() => {
    getData()
  })
</script>

<style scoped lang="scss">
  .template-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    padding: 16px;
    max-height: 832px;
    overflow-y: auto;

    .empty-template {
      width: 200px;
      height: 400px;
      border: 1px solid #f5f5f5;
      border-radius: 10px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-around;
      cursor: pointer;
      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

      &:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      }
    }

    .template-item {
      width: 200px;
      height: 400px;
      border: 1px solid #ccc;
      border-radius: 10px;
      position: relative;
      overflow: hidden;
      cursor: pointer;

      transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;

      &:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
      }
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.4);
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    .template-item:hover .mask {
      opacity: 1;
    }
  }
</style>
